<template>
    <div class="box">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <!-- 输入用户名 -->
            <el-form-item label="用户名" prop="username">
                <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
            </el-form-item>
            <!-- 输入密码 -->
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <!-- 输入验证码 -->
            <el-form-item label="验证码" prop="captcha">
                <el-input type="text" v-model="ruleForm.captcha" autocomplete="off">
                    <template slot="append">
                        <div v-html="captchaPic" @click="getCode"></div>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button class="btn" type="primary" @click="login('ruleForm')">登录</el-button>
                <el-button class="btn" @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    data() {
        return {
            captchaAns: '',
            captchaPic: '',
            ruleForm: {
                username: '',
                password: '',
                captcha: '',
            },
            rules: {
                username: [
                    { validator: this.checkUsername, trigger: 'blur' }
                ],
                password: [
                    { validator: this.checkPassword, trigger: 'blur' }
                ],
                captcha: [
                    { validator: this.checkCaptcha, trigger: 'blur' }
                ],
            }
        };
    },
    methods: {
        checkUsername(rule, value, callback) {
            value = value.trim();
            if (value === '') callback(new Error('用户名不能为空'));
            else if (!this.$nameTest(value)) callback(new Error('用户名格式错误'));
            else callback();
        },
        checkPassword(rule, value, callback) {
            value = value.trim();
            if (value === '') callback(new Error('密码不能为空'));
            else if (!this.$pwdTest(value)) callback(new Error('密码格式错误'));
            else callback();
        },
        checkCaptcha(rule, value, callback) {
            if (value != this.captchaAns) callback(new Error('验证码错误'));
            else callback();
        },
        login(formName) {
            this.$refs[formName].validate((res) => {
                if (res) {
                    let username = this.ruleForm.username.trim();
                    let password = this.ruleForm.password.trim();
                    this.$http.post('/users/backend/login', {username, password})
                        .then(({data: {code}}) => {
                            if (code == 1) {
                                this.$router.push('/index');
                            } else {
                                console.log('用户名或密码错误');
                            }
                        });
                } else {
                    console.log('参数错误');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.getCode();
        },
        getCode() {
            this.$http.get('/users/backend/code')
                .then(({data: {code, data: {text, data}}}) => {
                    if (code != 1) return console.log('获取验证码失败');
                    this.captchaAns = text;
                    this.captchaPic = data;
                    console.log(text);
                });
        }
    },
    created() {
        this.getCode();
    }
}

</script>

<style scoped>
.box {
    width: 450px;
    margin: 170px auto;
}
.btn {
    width: 46%;
}
</style>